<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      MoleMash - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c5 {border-width:0}
    li.c4 {list-style: none; display: inline}
    li.c3 {list-style: none}
    img.c2 {padding: 10px;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(Próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; MoleMash &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                MoleMash
              </h1>
              <h2>
                Que estás constryendo
              </h2><img align="right" alt="" class="c2" src="MoleMashAssets/MoleOnEmulator.png" width="300">
              <p>
                En el juego MoleMash, un topo aparece en posiciones aleatorias en un campo de juego, y el jugador consigue puntos golpendo al topo antes de que desaparezca. Este tutorial muestra cómo contruir MoleMash como un ejemplo de juego simple que usa una animación.
              </p>En este toturial se supone que has completado alguno de los tutoriales <a href="../../../learn/setup/hellopurr/hellopurremulatorpart1.html"><em>HelloPurr con el emulador</em></a>, o <a href="../../../learn/setup/hellopurr/hellopurrphonepart1.html"><em>HelloPurr con el emulador</em></a> y <a href="../../../learn/tutorials/paintpot/paintpot-part1.html"><em>PaintPot</em></a>.
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate al sitio web de App Inventor y comienza un nuevo proyecto. Nómbralo MoleMash, y también establece el <span class="ButtonText">Title</span> (titulo) de la pantalla a MoleMash. Abre el Editor de bloques y conecta el teléfono.
              </p>También descarga esta <a href="MoleMashAssets/mole.png">imagen de un topo</a> y guárdala en tu ordenador.
              <h2>
                Introducción
              </h2>
              <p>
                Diseñarás el juego para que el topo se mueva cada medio segundo. Si es tocado la puntuación se incrementará en un punto y el teléfono vibrará. Pulsando restart pondrás el contador a cero.
              </p>
              <p>
                Este tutorial introduce:
              </p>
              <ul>
                <li>Sprites de imagen
                </li>
                <li>Temporizadores y el componente <span class="ButtonText">Clock</span>
                </li>
                <li>Procedimientos
                </li>
                <li>Tomar un numero aleatorio entre 0 y 1
                </li>
                <li>Bloques de texto
                </li>
                <li>Typeblocking (creación de bloque mediante el teclado)
                </li>
              </ul>
              <h2>
                Los primeros componentes
              </h2>
              <p>
                Muchos componentes te resultarán familiares de tutoriales anteriores:
              </p>
              <ul>
                <li>Un <span class="ButtonText">Canvas</span> (lienzo) llamado <span class="ButtonText">MyCanvas</span>. Esta es el área donde el topo se moverá.
                </li>
                <li>Una  <span class="ButtonText">Label</span> (etiqueta) llamada <span class="ButtonText">ScoreLabel</span> que muestra la puntuación, p. ej. el número de veces que el jugador golpea el topo.
                </li>
                <li>Un <span class="ButtonText">Button</span> (botón) llamado <span class="ButtonText">ResetButton</span>
                </li>
              </ul>Arrastra estos componentes desde la <span class="ButtonText">Paleta</span> al <span class="ButtonText">Visor</span> y asígnales sus nombres. Colócalo en <span class="ButtonText">MyCanvas</span> arriba y ajusta sus dimensiones a 300 píxeles de ancho por 300 píxeles de alto. Cambia la propiedad <span class="ButtonText">Text</span> de <span class="ButtonText">ScoreLabel</span> a <span class="ButtonText">Score: ---</span>. Cambia la propiedad <span class="ButtonText">Text</span> de <span class="ButtonText">ResetButton</span> a <span class="ButtonText">Reset</span>. Añade también un componente <span class="ButtonText">Sound</span> y nómbralo  <span class="ButtonText">Noise</span>. Usarás  <span class="ButtonText">Noise</span> para hacer que el teléfono vibre cuando el topo sea tocado, del mismo modo que hiciste con el ronroneo del gato en <span class="ButtonText">HelloPurr</span>.
              <h2>
                Temporizadores y el componente <span class="ButtonText">Clock</span> (reloj)
              </h2>
              <p>
                Necesitarás que el topo salte periodicamente, y harás esto con la ayuda de un componente <span class="ButtonText">Clock</span>.
              </p>El componente <span class="ButtonText">Clock</span> proporciona varias operaciones relacionadas con el tiempo, como decirte la fecha. Aquí, usarás el componente como un temporizador que se dispare a intervalos regulares. El intervalo de disparo está determinado por la propiedad <span class="ButtonText">TimerInterval</span> de <span class="ButtonText">Clock</span>. Arrastra un componente <span class="ButtonText">Clock</span>; se colocará en el área de componentes no visibles (non-visible components). Nómbralo <span class="ButtonText">MoleTimer</span>. Ajusta su <span class="ButtonText">TimeInterval</span> a 500 milisegundos para hacer que el topo se mueva cada medio segundo. Asegúrate de que <span class="ButtonText">Enabled</span> (activado) está marcado.
              <h2>
                Añadiendo un Sprite de imagen (imagen animada)
              </h2>
              <p>
                Para agregar el topo en movimiento vamos a utilizar un <em>sprite</em>.
              </p>Los sprites son imágenes que se mueven en la pantalla en un <span class="ButtonText">Canvas</span> (lienzo). Cada sprite tiene una velocidad y una dirección, y también un intervalo que determina la frecuencia de los movimientos del sprite a su velocidad señalada. Los sprites también pueden detectar cuando se tocan. En <span class="ButtonText">MoleMash</span>, el topo tiene una velocidad cero, por lo que no se mueve por sí mismo. En su lugar, vas a configurar la posición del topo cada vez que se active el temporizador. Arrastra un componente <span class="ButtonText">ImageSprite</span> al <span class="ButtonText">Viewer</span> (visor). Encontrarás este componente en la categoría <span class="ButtonText">Animation</span> de la <span class="ButtonText">Paleta</span>. Colócalo dentro del área <span class="ButtonText">MyCanvas</span>. Establece estas propiedades para el sprite <span class="ButtonText">Mole</span>:
              <ul>
                <li>
                  <span class="ButtonText">Picture</span>: Usa mole.png, el cual has descargado al inicio de este tutorial.
                </li>
                <li>
                  <span class="ButtonText">Enabled</span>: marcado
                </li>
                <li>
                  <span class="ButtonText">Interval</span>: 500
                </li>
                <li class="c3">El intervalo no importa aquí, porque la velocidad del topo es cero: no se mueve por sí mismo.
                </li>
                <li>
                  <span class="ButtonText">Heading</span>: 0 La dirección no importa aquí tampoco, porque la velocidad es 0.
                </li>
                <li>
                  <span class="ButtonText">Speed</span>: 0.0
                </li>
                <li>
                  <span class="ButtonText">Visible</span>: activado
                </li>
                <li>
                  <span class="ButtonText">Width</span>: Automatico
                </li>
                <li>
                  <span class="ButtonText">Height</span>: Automatica
                </li>
              </ul>Debes ver la propiedades <span class="ButtonText">X</span> e <span class="ButtonText">Y</span> ya rellenadas. Estas fueron determinadas por el lugar donde colocaste el sprite cuando lo arrastraste a <span class="ButtonText">MyCanvas</span>. Arrastra un poco mas al topo. Debes ver como cambian <span class="ButtonText">X</span> e <span class="ButtonText">Y</span>. Debes ver también al topo en tu teléfono conectado, y moverse por el teléfono cuando lo arrastras en el <span class="ButtonText">Designer</span> (diseñador). Ya has especificado todos los componentes. El <span class="ButtonText">Designer</span> debería parecerse a esto. Fíjate en que <span class="ButtonText">Mole</span> está incluido bajo <span class="ButtonText">MyCanvas</span> en la estructura de la lista de componentes, indicando que el sprite es un sub-componente del lienzo (canvas).
              <div class="imagecontainer">
                <img alt="" src="MoleMashAssets/MoleMashDesigner.png" width="800">
              </div>
              <h2>
                Comportamiento de componentes y controladores de eventos
              </h2>
              <p>
                Ahora vamos a especificar el comportamiento de los componentes. Esto introduce algunas ideas nuevas de App Inventor. La primera es la idea de un <em>procedimiento</em>.
              </p>Un procedimiento es una secuencia de instrucciones a las que se puede hacer referencia a todas a la vez con un único comando. Si tienes una secuencia que es necesario utilizar más de una vez en un programa, esta se puede definir como un procedimiento, para no tenerla que repetir cada vez que la uses. Los procedimientos en App Inventor pueden tomar argumentos y devolver valores. Este tutorial cubre sólo el caso más simple: los procedimientos que no tienen argumentos y no devuelven ningún valor.
              <h2>
                Definir los procedimientos
              </h2>
              <p>
                Define dos procedimientos:
              </p>
              <ul>
                <li>
                  <span class="ButtonText">MoveMole</span> mueve el sprite Mole a una nueva posición al azar en el lienzo.
                </li>
                <li>
                  <span class="ButtonText">UpdateScore</span> muestra la puntuación, al cambiar el texto de <span class="ButtonText">ScoreLabel</span>
                </li>
              </ul>Comienza con <span class="ButtonText">MoveMole</span>:
              <ul>
                <li>En el Editor de bloques, bajo <span class="ButtonText">Built-In</span>, abre el cajón <span class="ButtonText">Definition</span>. Arrastra un bloque <span class="Block">to procedure</span> y cambia la etiqueta <span class="ButtonText">procedure</span> a <span class="ButtonText">MoveMole</span>.
                  <blockquote class="notice">
                    Nota: Hay dos bloques similares: <span class="ButtonText">procedure</span> y <span class="ButtonText">procedureWithResult</span>. Aquí debes utilizar <span class="ButtonText">procedure</span>.
                  </blockquote>El bloque <span class="Block">to MoveMole</span> tiene una ranura con la etiqueta <span class="ButtonText">do</span>. Ahí es donde debes pones las declaraciones para el procedimiento. En este caso habrá dos estados: uno para establecer la posición del topo <em>x</em> y otro para establecer su posición <em>y</em>. En cada caso, establecerás la posición a una fracción aleatoria, entre 0 y 1, de la diferencia entre el tamaño del lienzo y el tamaño del topo. Crearás el valor usando bloques <span class="ButtonText">random</span>-fraction y multiplicación y resta. Encontrarás estos bloques en el cajón <span class="ButtonText">Math</span>.
                </li>
                <li>Construye el procedimiento <span class="ButtonText">MoveMole</span>. La definición completa debe tener este aspecto:
                  <div class="imagecontainer">
                    <img alt="" height="170" src="MoleMashAssets/MoveMole.png" width="645">
                  </div>Deja vacía la ranura <span class="ButtonText">arg</span> de <span class="ButtonText">MoveMole</span> porque <span class="ButtonText">MoveMole</span> no toma ningún argumento. Observa cómo los bloques se conectan entre sí: La primera instrucción utiliza el bloque <span class="Block">Mole.X gets</span> para definir la posición horizontal de topo. El valor conectado a la ranura del bloque es el resultado de multiplicar:
                  <ol>
                    <li>el resultado del bloque <span class="Block">call random-fraction</span>, el cual tiene un valor entre 0 y 1
                    </li>
                    <li>el resultado de restar la anchura del topo de la anchura del lienzo.
                    </li>
                  </ol>La posición vertical se manejan de manera similar.
                </li>
              </ul>Con <span class="ButtonText">MoveMole</span> hecho, el siguiente paso es definir una variable para la puntuación llamada <span class="ButtonText">score</span> para mantener la puntuación, (número de aciertos) y darle valor inicial 0. También tenemos que definir un procedimiento <span class="ButtonText">UpdateScore</span> que muestre la puntuación en <span class="ButtonText">ScoreLabel</span>. El contenido actual para mostrar en <span class="ButtonText">ScoreLabel</span> es el texto "Score: " tomado del valor de <span class="ButtonText">score</span>.
              <ul>
                <li>Para crear la parte de la etiqueta "Score: ", arrastra un bloque <span class="Block">text</span> desde el cajón <span class="ButtonText">Text</span>. Cambiar el bloque a "Score: " en lugar de "text".
                </li>
                <li>Utiliza un bloque <span class="Block">join</span> para unir este al bloque que da el valor de la variable <span class="ButtonText">score</span>. Puedes encontrar el bloque <span class="Block">join</span> en el cajón <span class="ButtonText">Text</span>.
                </li>
                <li class="c4">Así es como <span class="ButtonText">score</span> y <span class="ButtonText">UpdateScore</span> deben aparecer:
                  <div class="imagecontainer">
                    <img alt="" height="171" src="MoleMashAssets/UpdateScore.png" width="485">
                  </div>
                </li>
              </ul>
              <h2>
                Añade un temporizador
              </h2>
              <p>
                El siguiente paso es hacer al topo mantenerse en movimiento. Aquí es donde vamos a usar <span class="ButtonText">MoleTimer</span>. El componente <span class="ButtonText">Clock</span> tiene un controlador de eventos llamado <span class="Block">when ... Timer</span> que se dispara repetidamente a una velocidad determinada por <span class="ButtonText">TimerInterval</span>.
              </p>Establece <span class="ButtonText">MoleTimer</span> para llamar a <span class="ButtonText">MoveMole</span> cada vez que se active el temporizador, mediante la construcción de un controlador de eventos como este:
              <div class="imagecontainer">
                <img alt="" height="103" src="MoleMashAssets/MoleMashTimerEventHandler.png" width="211">
              </div>
              <blockquote class="notice">
                Observa cómo el topo empieza a moverse en el teléfono tan pronto como se define el controlador de eventos. Este es un ejemplo de cómo las cosas en App Inventor comienzan a suceder de forma instantánea, tan pronto como se definen.
              </blockquote>
              <h2>
                Agrega un controlador táctil para el topo
              </h2>
              <p>
                El programa debe incrementar la puntuación cada vez que se toque el topo. Los sprites, como los lienzos, responden a los eventos táctiles. Así que crea un controlador de eventos táctil para <span class="ButtonText">Mole</span> que:
              </p>
              <ol>
                <li>Incremente la puntuación.
                </li>
                <li>Llame a <span class="ButtonText">UpdateScore</span> para mostrar la nueva puntuación.
                </li>
                <li>Hacer que el teléfono vibre durante 1/10 de segundo (100 milisegundos).
                </li>
                <li>Llame a <span class="ButtonText">MoveMole</span> para que el topo se mueva de inmediato, en lugar de esperar al temporizador.
                </li>
              </ol>Así es como debe aparecer esto en bloques. Sigue y ensambla los bloques <span class="ButtonText">Mole.Touched</span> como se muestran.
              <div class="imagecontainer">
                <img alt="" height="247" src="MoleMashAssets/MoleMashTouchEventHandler.png" width="430">
              </div>He aquí un consejo: Puedes utilizar typeblocking: para crear rápidamente los bloques.
              <ul>
                <li>Para crear un bloque de valor 100, sólo tienes que escribir 100 y pulsar Intro.
                </li>
                <li>Para crear un bloque <span class="ButtonText">MoveMole</span>, sólo tienes que escribir <em>MoveMole</em> seleccionar el bloque que desees de la lista
                </li>
              </ul>
              <h2>
                Restablecer la puntuación
              </h2>
              <p>
                Un detalle final es restablecer la puntuación. Esto simplemente es cuestión de hacer que el botón <span class="ButtonText">Reset</span> cambie la puntuación a 0 y llame a <span class="ButtonText">UpdateScore</span>.
              </p>
              <h2>
                Programa Completo
              </h2>
              <p>
                Aquí está el programa MoleMash completo:
              </p>
              <div class="imagecontainer">
                <img alt="" height="513" src="MoleMashAssets/MoleMashComplete.png" width="800">
              </div>
              <h2>
                Variaciones
              </h2>
              <p>
                Una vez que tengas en funcionamiento el juego, es posible que desees explorar algunas variaciones. Por ejemplo:
              </p>
              <ul>
                <li>Hacer al juego variar la velocidad del topo en respuesta a lo bien que el jugador lo está haciendo. Para variar la rapidez de los movimientos del topo, tendrás que cambiar la propiedad <span class="ButtonText">Interval</span> de <span class="ButtonText">MoleTimer's</span>.
                </li>
                <li>Llevar un registro de cuando el jugador golpea el topo, y cuando falla el tiro, y mostrar una puntuación con los aciertos y errores. Para hacer esto, tendrás que definir controladores táctiles para <span class="ButtonText">Mole</span>, como hasta ahora, y para <span class="ButtonText">MyCanvas</span>. Una de las cuestiones sutiles, si el jugador toca el topo, ¿eso también cuenta como un toque para el lienzo? La respuesta es sí. Ambos eventos se registrarán.
                </li>
              </ul>
              <h2>
                Revisión
              </h2>
              <p>
                Estas son algunas de las ideas incluidas en este proyecto:
              </p>
              <ul>
                <li>Los sprites son sensibles al tacto y se pueden programar para moverse en un lienzo.
                </li>
                <li>El componente <span class="ButtonText">Clock</span> puede ser utilizado como un temporizador para hacer que ocurran acontecimientos a intervalos regulares.
                </li>
                <li>Se definen los procedimientos mediante los bloques <span class="Block">to</span>.
                </li>
                <li>Para cada procedimiento que se define, App Inventor crea automáticamente un bloque de llamadas asociado y lo coloca en el cajón <span class="ButtonText">My Definitions</span>.
                </li>
                <li>La llamada a <span class="ButtonText">random-fraction</span> produce un número entre 0 y 1
                </li>
                <li>Los bloques de texto especifican texto literal, del mismo modo en que los bloques de números especifican números literales
                </li>
                <li>Typeblocking es una manera de crear bloques de forma rápida, escribiendo el nombre de un bloque
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c5" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google ha sido modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>